<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/static/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
    <title>index</title>
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>

    <!--
        thymeleaf + bootstrap 版本（已弃用）
        作者：@☆*往事随風*☆ https://blog.csdn.net/m0_47214030?spm=1000.2115.3001.5343
     -->

</head>
<body>
        <div class="container">
            <!-- 标题 -->
            <div class="row">
                <h1 class="col-md-4 col-md-offset-4">部门管理系统</h1>
            </div>
            <!-- 按钮 -->
            <div class="row">
                <div class="col-md-4 col-md-offset-8">
                    <button class="btn btn-primary">新增</button>
                    <button class="btn btn-danger">删除</button>
                </div>
            </div>
            <!--  列表信息-->
            <div class="row">
                <div class="col-md-12">
                    <table class="table-hover table-bordered col-md-12 employee-table">
                        <tr>
                            <th>id</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>邮箱</th>
                            <th>所在部门</th>
                            <th>操作</th>
                        </tr>
                        <tr th:each="employee : ${employeePageInfo.list}">
                            <td th:text="${employee.employeeId}">1</td>
                            <td th:text="${employee.employeeName}">王炸</td>
                            <td th:text="${employee.gender}">男</td>
                            <td th:text="${employee.email}">123@qq.com</td>
                            <td th:text="${employee.department.departmentName}">开发部</td>
                            <td>
                                <button class="btn btn-primary" aria-label="Left Align">
                                    <span class="glyphicon glyphicon-pencil  btn-sm" aria-hidden="true"></span>
                                    编辑
                                </button>
                                <button class="btn btn-danger" aria-label="Left Align">
                                    <span class="glyphicon glyphicon-trash  btn-sm" aria-hidden="true"></span>
                                    删除
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--  分页导航-->
            <div class="row">
                <!-- 分页文字信息 -->
                <div class="col-md-6">
                    <span th:text="|当前页码 ${employeePageInfo.getPageNum()} |"></span>
                    <span th:text="|总页码 ${ employeePageInfo.getPageSize()} |"></span>
                    <span th:text="|总记录数 ${employeePageInfo.getTotal()} |"></span>
                </div>
                <!-- 分页导航 -->
                <div class="col-md-6">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li>
                                <a th:href="@{/index?pageNumber=1}">首页</a>
                            </li>
                            <li th:if="${employeePageInfo.hasPreviousPage}">
                                <a th:href="@{|/index?pageNumber=${employeePageInfo.getPageNum() - 1}|}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li th:each="navigatePageNumber : ${employeePageInfo.getNavigatepageNums()}"
                                th:class="${navigatePageNumber == employeePageInfo.getPageNum() ? 'active' : ''}">
                                <a th:href="@{|/index?pageNumber=${navigatePageNumber}|}"
                                   th:text="${navigatePageNumber}">1</a>
                            </li>
                            <li th:if="${employeePageInfo.hasNextPage}">
                                <a th:href="@{|/index?pageNumber=${employeePageInfo.getPageNum() + 1}|}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li>
                                <a th:href="@{|/index?pageNumber=${employeePageInfo.getPages()}|}">尾页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
</body>
</html>